<template>
  <div class="container" v-if="isadmin">
    <el-drawer
      v-model="set.topmenu"
      :with-header="false"
      direction="ltr"
      size="auto"
      style="padding: 0"
    >
      <el-menu
        class="el-menu-vertical-demo"
        :default-active="itempath"
        style="border: none"
        :router="true"
        @click="set.topmenu = false"
      >
        <el-menu-item index="/postlist/0">
          <el-icon><House /></el-icon>
          <span>回到主页</span>
        </el-menu-item>

        <el-menu-item index="/admin/site">
          <el-icon><House /></el-icon>
          <span>网站概览</span>
        </el-menu-item>

        <el-menu-item index="/admin/account">
          <el-icon><User /></el-icon>
          <span>账号管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/bbs">
          <el-icon><Notification /></el-icon>
          <span>帖子管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/mod">
          <el-icon><Files /></el-icon>
          <span>资源管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/role">
          <el-icon><Medal /></el-icon>
          <span>头衔列表管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/category">
          <el-icon><Position /></el-icon>
          <span>板块列表管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/motd">
          <el-icon><DataBoard /></el-icon>
          <span>游戏内置公告</span>
        </el-menu-item>

        <el-menu-item index="/admin/version">
          <el-icon><Notification /></el-icon>
          <span>游戏版号管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/server">
          <el-icon><IconServer /></el-icon>
          <span>服务器列表管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/log">
          <el-icon><Document /></el-icon>
          <span>后台日志</span>
        </el-menu-item>

        <el-menu-item index="/admin/invite">
          <el-icon><CirclePlus /></el-icon>
          <span>邀请码</span>
        </el-menu-item>

        <el-menu-item index="/admin/celebrityHall">
          <el-icon><CirclePlus /></el-icon>
          <span>名人堂管理</span>
        </el-menu-item>
      </el-menu>
    </el-drawer>
    <div :style="{ padding: set.ismobile ? '0 12px' : '0 2rem' }">
      <router-view />
    </div>
  </div>
  <div v-else><h4>你没有权限访问该页面</h4></div>
</template>

<script lang="ts">
import Cfg from '@/config/config.ts'
import IconServer from '@comps/icons/mod/server.vue'
import { watch } from 'vue'

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

export default {
  name: 'Admin',
  components: {
    Location,
    Setting,
    Document,
    IconMenu,
    IconServer,
  },
  data() {
    return {
      ...Cfg,
      isadmin: Cfg.userInfo.data.isAdmin,
      activeTab: '1',
      itempath: '',
    }
  },
  mounted() {
    if (this.$route.path == '/admin') {
      this.$router.push('/admin/site')
    }
    this.set.topbtn = true
    this.set.showfooter = false
    this.maincontainer.height = 'auto'

    watch(
      () => this.$route,
      () => {
        this.itempath = this.$route.path
      },
    )
  },
  activated() {
    if (this.$route.path == '/admin') {
      this.$router.push('/admin/site')
    }
    this.set.topbtn = true
    this.set.showfooter = false
    this.maincontainer.height = 'auto'
  },
  unmounted() {
    this.set.topbtn = false
    this.maincontainer.height = 'auto'
  },
  deactivated() {
    this.set.topbtn = false
    this.maincontainer.height = 'auto'
  },
}
</script>
<style scoped>
.container {
  margin-top: 20px;
}

.el-pagination {
  margin-top: 10px;
}
.menubtn {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  z-index: 2;
}
</style>
